<!--
  文件描述：
  创建时间：2025/4/2 19:01
  创建人：FanHao
-->
<template>
  <el-dialog
      v-model="dialogVisible"
      title="选择参会人员"
      width="70%"
  >
    <el-row :gutter="20">
      <!-- 左侧树形结构 -->
      <el-col :span="12">
        <el-tree
            :data="departmentMemberTree"
            node-key="id"
            :props="{
            label: 'name',
            children: 'children'
          }"
            :expand-on-click-node="false"
            @check="handleCheck"
            show-checkbox
            class="h-[400px] overflow-auto"
        >
          <template #default="{ node, data }">
            <span>
              <el-icon v-if="data.user"><User/></el-icon>
              <el-icon v-else><Folder/></el-icon>
              <span class="ml-2">{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
      </el-col>

      <!-- 右侧已选用户 -->
      <el-col :span="12">
        <el-scrollbar class="h-[400px] overflow-auto">
          <div v-for="user in selectedUsers" :key="user.id" class="flex items-center p-2 border-b">
            <el-icon>
              <User/>
            </el-icon>
            <span class="ml-2">{{ user.name }}</span>
          </div>
        </el-scrollbar>
      </el-col>
    </el-row>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmSelection">确认</el-button>
    </template>
  </el-dialog>
</template>


<script>
import {Folder, User} from '@element-plus/icons-vue';
import {GetDepartmentAndUsers} from "@/api/index.js";

export default {
  components: {Folder, User},
  data() {
    return {
      dialogVisible: false,
      departmentMemberTree: [],
      selectedUsers: []
    };
  },
  created() {
    this.getDepartmentAndUsers();
  },
  methods: {
    getDepartmentAndUsers() {
      GetDepartmentAndUsers().then((res) => {
        this.departmentMemberTree = res.data;
      });
    },
    handleCheck(data, {checkedNodes}) {
      this.selectedUsers = [];
      checkedNodes.forEach(node => {
        if (node.user) {
          this.selectedUsers.push({
            userId: node.id,
            name: node.name,
            departmentId: node.parentId,
            departmentName: this.getDepartmentName(node.parentId)
          });
        }
      });
    },
    getDepartmentName(parentId, nodes = this.departmentMemberTree, path = []) {
      for (const node of nodes) {
        if (node.id === parentId) {
          path.unshift(node.name);
          if (node.parentId !== '0') {
            this.getDepartmentName(node.parentId, this.departmentMemberTree, path);
          }
          return path.join('/');
        }
        if (node.children) {
          const result = this.getDepartmentName(parentId, node.children, path);
          if (result) return result;
        }
      }
      return path.join('/');
    },
    confirmSelection() {
      this.$emit('update:attendeeInfoList', this.selectedUsers);
      this.dialogVisible = false;
    }
  },

};

</script>
